const Vue = require('vue')
const express = require('express')
const fs = require('fs')
const {createBundleRenderer}=require('vue-server-renderer')
const setupDevServer=require('./build/setup-dev-server')
const server = express()
//加载动态脚本
//第一个参数:请求前缀，
//第二个参数:使用express.static中间件尝试在dist目录中查找资源，然后处理返回
//表示当在以/dist为前缀的资源请求中，将在dist目录中查找加载资源
server.use('/dist',express.static('./dist'))

const isProd=process.env.NODE_ENV==='production'
let renderer
let onReady
if(isProd){
    //生产模式可以直接得到renderer
    const serverBundle =require('./dist/vue-ssr-server-bundle.json')
    const template= fs.readFileSync('./index.template.html', 'utf-8')
    const clientManifest=require('./dist/vue-ssr-client-manifest.json')
    renderer = createBundleRenderer(serverBundle,{
        template,
        clientManifest
    })

}else{
    //开发模式->监视打包构建 -> 重新生成 Renderer 渲染器
    onReady=setupDevServer(server,(serverBundle,template,clientManifest)=>{
        renderer = createBundleRenderer(serverBundle,{
            template,
            clientManifest
        })
    })

}
const render= async (req, res) => {
    try {
        const html= await renderer.renderToString({
            title:'拉勾教育',
            meta:`
            <meta name="description" content="拉勾教育1.0">
            `,
            url:req.url
        })
        res.setHeader('Content-Type', 'text/html;charset=utf8')
        res.end(html)
    } catch (err) {
        return res.status(500).end('Internal Server Error.')
    }
    
}
//服务端路由设置为*,意味所有路由都会进入到这里
server.get('*',isProd?render:async(req,res)=>{
    //等待有了Renderer渲染器以后，调用render进行渲染
    await onReady
    render(req,res)
} )
server.listen(3000, () => {
    console.log('Server running at 3000')
})